import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import { Layout, Menu, Icon } from 'antd';
import './app.less';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class App extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	collapsed: false,
	    	left: 200,
	    	menuList: [{
	    		menuId: '01',
	    		menuName: "系统管理",
	    		menuUrl: "",
	    		menuIcon: "home",
	    		menuList: [{
	    			menuId: '011',
	    			menuName: "系统用户",
	    			menuUrl: "/sysUser",
	    			menuIcon: "",
	    		},{
	    			menuId: '012',
	    			menuName: "角色管理",
	    			menuUrl: "/sysRole",
	    			menuIcon: "",
	    		},{
	    			menuId: '013',
	    			menuName: "权限管理",
	    			menuUrl: "/sysPermission",
	    			menuIcon: "",
	    		}]
	    	},{
	    		menuId: '02',
	    		menuName: "系统监控",
	    		menuUrl: "",
	    		menuIcon: "line-chart",
	    		menuList: [{
	    			menuId: '021',
	    			menuName: "系统日志",
	    			menuUrl: "/sysLog",
	    			menuIcon: "",
	    		},{
	    			menuId: '022',
	    			menuName: "登录日志",
	    			menuUrl: "/loginLog",
	    			menuIcon: "",
	    		}]
	    	},{
	    		menuId: '03',
	    		menuName: "电商系统",
	    		menuUrl: "",
	    		menuIcon: "shopping-cart",
	    		menuList: [{
	    			menuId: '031',
	    			menuName: "分类信息",
	    			menuUrl: "/shopClassify",
	    			menuIcon: "",
	    		},{
	    			menuId: '032',
	    			menuName: "商品信息",
	    			menuUrl: "/shopGoods",
	    			menuIcon: "",
	    		},{
	    			menuId: '033',
	    			menuName: "订单列表",
	    			menuUrl: "/shopOrder",
	    			menuIcon: "",
	    		}]
	    	},{
	    		menuId: '04',
	    		menuName: "用户中心",
	    		menuUrl: "",
	    		menuIcon: "user",
	    		menuList: [{
	    			menuId: '041',
	    			menuName: "用户列表",
	    			menuUrl: "/userInfo",
	    		}]
	    	}]
	    }
	}
	
	onCollapse = (collapsed) => {
		if(collapsed){
			this.setState({ 
				collapsed: collapsed,
				
			});
			var num = 200;
			var timer = setInterval(() => {
				num -= 20;
				this.setState({
					left: num
				})
				if(num == 80){
					clearInterval(timer);
				}
			}, 20)
		}else{
			this.setState({ 
				collapsed: collapsed,
				left: 200
			});
		}
	    
  	}
	
	handleClick = (item) => {
		hashHistory.push(item.menuUrl);
	}
	
	render(){
		const { collapsed, menuList, left } = this.state;
		return(
			<Layout>
				<Sider className="sider"
					collapsible
          			collapsed={collapsed}
          			onCollapse={this.onCollapse}
					>
					<Menu theme="dark" 
						mode="inline" 
						>
						{
							menuList.map((item, index) => {
								var menuList = item.menuList;
								return(
									<SubMenu
						              key={item.menuId}
						              title={<span><Icon type={item.menuIcon} /><span>{item.menuName}</span></span>}>
						              {
						              	menuList.map((item, index) => {
						              		return(
						              			<Menu.Item key={item.menuId} onClick={() => this.handleClick(item)}>{item.menuName}</Menu.Item>
						              		)
						              	})
						              }
						            </SubMenu>
								)
							})
						}
			      	</Menu>
				</Sider>
			 	<Layout style={{ marginLeft: left }}>
		          <Content className="content">
		            {this.props.children}
		          </Content>
		        </Layout>
			</Layout>
		)
	}
}

export default App;